在本地化 (localize) 文字訊息時，我們可能會遇到某些語言會有複數型態的狀況 (最常見的就是英文)，雖然我們可以透過個別定義 key value 的方式，再藉由程式邏輯去控制要顯示哪一個，但這顯然不是最好的做法。

{
  "apple": "apple",
  "apples": "apples",
  "car": "car",
  "cars": "cars"
}

<p>{{ count > 1 ? $t('apples') : $t('apple')}}</p>

所以今天我們要來分享在 Vue i18n 中實現多元化 (Pluralization) 的方式，如果對 Vue i18n 不太熟悉或者還沒有看過前兩篇的朋友建議先看過再回來此篇做閱讀。

• Vue i18n - 導入 & 基礎用法
• Vue i18n - Message Format Syntax

基本用法

在定義語系檔時，只需要用 | 分隔符號來區隔開來不同數量上的的字詞。

{
  "apple": "no apples | apple | apples",
  "car": "car | cars"
}

除了可以定義單數或複數以外，也可以定義數量為 0 時的表現方式。

所以在 template 的寫法會是：

<p>{{ $t('apple', 0) }}</p>
<p>{{ $t('apple', 1) }}</p>
<p>{{ $t('apple', 2) }}</p>

<p>{{ $t('car', 0) }}</p>
<p>{{ $t('car', 1) }}</p>
<p>{{ $t('car', 2) }}</p>

由於我們 Vue i18n 是配置 Composition API mode 所以是用 $t，如果是 Legacy API mode 則是使用 $tc。

得到的結果是：

<p>no apples</p>
<p>apple</p>
<p>apples</p>

<p>cars</p>
<p>car</p>
<p>cars</p>

需要注意的是，在沒有定義數量為 0 時的表現方式時，會自動用複數型態表示。

結合 Named interpolation

如果你想要字詞前面加上數量的話，可以透過 Named interpolation 的方式達到。

在 Vue i18n - Message Format Syntax 中我們有介紹到 Named interpolation ，如果不熟悉的朋友可以參考閱讀。

{
  "apple": "no apples | one apple | {count} apples",
  "car": "no cars | {n} car | {n} cars",
}

所以在 template 的寫法會是：

<p>{{ $t('apple', 0) }}</p>
<p>{{ $t('apple', 1) }}</p>
<p>{{ $t('apple', 10, { count: 10 }) }}</p>
<p>{{ $t('apple', 10) }}</p>

<p>{{ $t('car', 0) }}</p>
<p>{{ $t('car', 1, { n: 1 }) }}</p>
<p>{{ $t('car', 2) }}</p>

值得注意的是，如果插值的名稱是 n 或 count 可以省略不傳入。

得到的結果是：

<p>no apples</p>
<p>one apple</p>
<p>10 apples</p>
<p>10 apples</p>

<p>no cars</p>
<p>1 car</p>
<p>2 cars</p>

結合 Linked messages

如果多元化的字詞除了會單獨使用之外，也總含在其他字句中，我們可以透過 Linked messages 的方式來實現。

在 Vue i18n - Message Format Syntax 中我們有介紹到 Linked messages ，如果不熟悉的朋友可以參考閱讀。

{
  "apple": "no apples | one apple | {count} apples",
  "sentence": "I have @:apple",
}

所以在 template 的寫法會是：

<p>{{ $t('sentence', 0) }}</p>
<p>{{ $t('sentence', 1) }}</p>
<p>{{ $t('sentence', 10) }}</p>

得到的結果是：

<p>I have no apples</p>
<p>I have one apple</p>
<p>I have 10 apples</p>

參考資料

• Vue I18n 官方文件

今天的分享就到這邊，如果大家對我分享的內容有興趣歡迎點擊追蹤 & 訂閱系列文章，如果對內容有任何疑問，或是文章內容有錯誤，都非常歡迎留言討論或指教的！

明天要來分享的是 Vue i18n 主題的第四篇 Component Interpolation，那我們明天見！